<script lang="ts">
    import { Baud_rate, Serial_select, Serial_select_value } from '$lib/data';
    import { get_serial } from '$lib/link'

    import { onMount } from 'svelte';
    import { Label, Dropdown, DropdownItem, Button, ButtonGroup, NumberInput, InputAddon, Select } from "flowbite-svelte";
    import { ChevronDownOutline } from "flowbite-svelte-icons";

//该页面可能会有渲染问题

    let { name } = $props();

    let Serial_port_array: string;

    onMount(() => {
        get_serial().then((arr) => {Serial_port_array = arr});
    });

    function update_Serial_select() {
        get_serial().then((arr) => {Serial_port_array = arr});
        Serial_select.set([])
        for (const item of Serial_port_array){
            // console.log(item)
            Serial_select.update((array) => {
                const newArray = [...array, {value: item, name: item}];
                return newArray;
            });
        }
    }

</script>

{#if name=="Serial_select"}
    <div class="m-2">
        <Label class="m-2 text-lg">端口选择</Label>
        <pre>{$Serial_select_value}</pre>
    </div>
    
    <div class="m-3">
        <Select id="select-underline" items={$Serial_select} bind:value={$Serial_select_value} onclick={() => {update_Serial_select()}}></Select>
    </div>
{/if}

{#if name=="Baud_rate"}
    <div class="m-2">
        <Label class="m-2 text-lg ">波特率设置</Label>
    </div>
    <div class="m-3">
        <ButtonGroup>
            <NumberInput type="text" id="Baud_rate" bind:value={$Baud_rate} />
            <InputAddon>bps</InputAddon>
        </ButtonGroup>
        <Dropdown>
            <DropdownItem onclick={() => {$Baud_rate = 1200}}>1_200</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 2400}}>2_400</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 4800}}>4_800</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 9600}}>9_600</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 19200}}>19_200</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 38400}}>38_400</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 57600}}>57_600</DropdownItem>
            <DropdownItem onclick={() => {$Baud_rate = 115200}}>115_200</DropdownItem>
        </Dropdown>
    </div>
{/if}